<template>
  <div class="container">
    <FmTable  ref="fmTable" url="/process/flowable" id="taskId" tableName="task" listapiurl="myProcess" :columns="columns"
             :toolbar="['add','del']">
      <template #add="scope">
        <el-button
            type="primary"
            plain
            icon="CirclePlusFilled"
            @click="handleAdd()"
        >新增流程
        </el-button>
      </template>
      <template #del="{del}">
        <el-button
            type="danger"
            plain
            icon="delete"
            @click="delAllSelection(del)"
        >删除
        </el-button>
      </template>
      <template #procDefVersion="scope">
        <el-tag size="small">v{{ scope.row.procDefVersion }}</el-tag>
      </template>
      <template #finishTime="scope">
        <el-tag v-if="scope.row.finishTime == null" size="small">进行中</el-tag>
        <el-tag type="success" v-if="scope.row.finishTime != null" size="small">已完成</el-tag>
      </template>
      <template #opt="scope">
        <el-button @click="handleFlowRecord(scope.row)" type="primary" link size="small">详情</el-button>
        <el-button  v-if="scope.row.finishTime == null"  @click="handleStop(scope.row)" type="primary"  link size="small">取消申请</el-button>
      </template>
    </FmTable>
    <FmSelectTable ref="fmSelectTable" @submit="submitFormDeploy" v-model:value="queryProcessParams['formId']"
                   title="发起流程" check-type="single" :columns="selectdefinitioncolumns" :isShowInput="false"
                   url="/process/flowable" id="deploymentId" tableName="definition" lable="name">
      <template #opt="scope">
        <el-button
            size="small"
            type="text"
            icon="el-icon-edit-outline"
            @click="handleStartProcess(scope.row)"
        >发起流程</el-button>
      </template>
    </FmSelectTable>

  </div>
</template>

<script lang="ts" setup>
import {saveorUpadateDate, deteleAllData, saveorUpadateDateParam} from '@/api/index';

import {ref, reactive, nextTick, onMounted, getCurrentInstance, ComponentInternalInstance} from 'vue';
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const columns = [
  {
    "label": "流程编号",//标签名称
    "index": "procInsId",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
    "addable": false
  },
  {
    "label": "流程名称",//标签名称
    "index": "procDefName",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
    "addable": false
  },
  {
    "type": "dict",
    "label": "流程类型",//标签名称
    "dictkey": "process_type",
    "index": "category",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false
  },
  {
    "label": "流程版本",//标签名称
    "index": "procDefVersion",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false
  },
  {
    "label": "提交时间",//标签名称
    "index": "createTime",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false
  },
  {
    "label": "流程状态",//标签名称
    "index": "finishTime",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false
  },
  {
    "label": "耗时",//标签名称
    "index": "duration",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false
  },
  {
    "label": "当前节点",//标签名称
    "index": "taskName",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false
  },
  {
    "label": "办理人",//标签名称
    "index": "assigneeName",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false
  },
  {
    "type": "opt",//普通行，字典行，自定义行
    "label": "操作",//标签名称
    "index": "opt",//数据库索引
    "rules": [],//值规则
    "width": 150,
    "dataType": "text",//值值类型默认字符类型
  }
]
const selectdefinitioncolumns = [
  {
    "label": "流程编号",//标签名称
    "index": "deploymentId",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "流程标识",//标签名称
    "index": "flowKey",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "type":"dict",
    "label": "流程分类",//标签名称
    "dictkey": "process_type",
    "index": "category",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "流程名称",//标签名称
    "index": "name",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "业务表单",//标签名称
    "index": "formId",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "流程版本",//标签名称
    "index": "version",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "type":"dict",
    "dictkey": "process_status",
    "label": "流程状态",//标签名称
    "index": "suspensionState",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "label": "部署时间",//标签名称
    "index": "deploymentTime",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable":false
  },
  {
    "type": "opt",//普通行，字典行，自定义行
    "label": "操作",//标签名称
    "index": "opt",//数据库索引
    "rules": [],//值规则
    "width":150,
    "dataType": "text",//值值类型默认字符类型
  }
]
let fmTable = ref()
let fmSelectTable=ref(null)
let queryProcessParams=reactive({})
let formconfigishow = ref(false)
let formDeployParam = reactive({})
let formJson = reactive({})
const formData = reactive({})
const optionData = reactive({})
const router = useRouter()
const previewformshow = ref(false)
const handleUpdateSuspensionState = (row: any) => {
  let state = 1;
  if (row.suspensionState === 1) {
    state = 2
  }
  const params = {
    deployId: row.deploymentId,
    state: state
  }
  saveorUpadateDateParam("/process/flowable/definition/updateState", params).then(res => {
    ElMessage.success("操作成功");
    fmTable.value.readyGetData()
  });
}
const handleLoadXml = (row: any) => {
  router.push({path: '/admin/flowable/model', query: {deployId: row.deploymentId}})
}
const handleAddForm = (row: any) => {
  formDeployParam.deployId = row.deploymentId
  fmSelectTable.value.open()
}
const submitFormDeploy = (row:any) => {
  router.push({ path: '/admin/task/send',
    query: {
      deployId: row.deploymentId,
      procDefId: row.id
    }
  })
}
const handleDetail = (row) => {
  formJson = reactive(JSON.parse(row.formContent))
  previewformshow.value = true
}
const handleFlowRecord = (row: any) => {
  router.push({
    path: '/admin/task/processdetail',
    query: {
      procInsId: row.procInsId,
      deployId: row.deployId,
      taskId: row.taskId
    }
  })
}
const handleStop = (row: any) => {
  const params = {
    instanceId: row.procInsId
  }
  saveorUpadateDate("/process/flowable/task/stopProcess", params).then(res => {
    ElMessage.success("操作成功")
    fmTable.value.readyGetData()
  });
}
const handleAdd = () => {
   fmSelectTable.value.open()
}
const handleStartProcess = (row:any) => {
  router.push({ path: '/admin/task/send',
    query: {
      deployId: row.deploymentId,
      procDefId: row.id
    }
  })
}
const delAllSelection = (del:any) => {
  debugger
  let ids=del.map(e=>e['procInsId'])
   deteleAllData("/process/flowable/instance/delete",ids).then((res:any)=>{
     ElMessage.success("删除成功")
     fmTable.value.readyGetData()
   })
}


</script>
